import { Button, Table,Space } from 'antd';
import { useEffect, useState } from 'react';
import {useNavigate} from 'react-router-dom'

// 组件
const CouponsTable = (props) => {
  console.log(props.Datas,111)
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [tableData,setTableData] = useState([]);
  const couponsData = useNavigate();
  const columns = [
    {
      title: '优惠券名称',
      dataIndex: 'couponName',
    },
    {
      title: '优惠券类型',
      dataIndex: 'couponType',
    },
    {
      title: '使用范围',
      dataIndex: 'scope',
    },
    {
      title:'优惠券状态',
      dataIndex:'state',
    },
    {
      title:'有效期',
      dataIndex:'usefulLife',
    },
    {
      title:'操作',
      render:(_,record) => (
          <Space size="middle">
              <Button type='link'>编辑</Button>
              <Button type='link' onClick={()=>{jumpData()}}>数据</Button>
              <Button type='link' onClick={()=>{props.fn(record.couponId)}}>停用</Button>
          </Space>
      )
    }
  ];
  // 分页
  const showTotal = (tableData) => {
    return `数量 ${tableData.length} 条`
  }
  const PageTotal = Math.ceil(tableData.length/10)+1
  const jumpData = ()=>{
    couponsData('/home/market/couponsDataPage')
  }
  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  useEffect(()=>{
    setTableData(props.Datas)
  },[])
  const hasSelected = selectedRowKeys.length > 0;
  return (
    <div className="couponsDataPage">
      <div 
        className="couponsDataPageHead"
        style={{
          marginBottom: 16,
        }}
      >
        <span
          style={{
            marginLeft: 8,
          }}
        >
          {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
        </span>
      </div>
      <Table rowSelection={rowSelection} columns={columns} dataSource={props.Datas} rowKey={(record)=>record.couponId}
            pagination={{
              total: PageTotal,
              showTotal: ()=> showTotal(tableData),
              showSizeChanger: true,
              showQuickJumper: true,
            }}
 />
    </div>
  );
};

export default CouponsTable;